<template>
    <div ref="chartContainer" :style="{ width: width, height: height }"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  import { generateChartOptions } from './chartUtils';
  
  const props = defineProps({
    chartType: {
      type: String,
      required: true,
      validator: (value) => ['line', 'bar', 'pie', 'scatter'].includes(value)
    },
    chartData: {
      type: Object,
      required: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    }
  });
  
  const chartContainer = ref(null);
  let chart = null;
  
  onMounted(() => {
    chart = echarts.init(chartContainer.value);
    updateChart();
  });
  
  watch(() => props.chartData, updateChart, { deep: true });
  watch(() => props.chartType, updateChart);
  
  function updateChart() {
    console.log("props",props);
    const options = generateChartOptions(props.chartType, props.chartData);
    chart.setOption(options);
  }
  
  onUnmounted(() => {
    if (chart) {
      //释放资源
      chart.dispose();
      //首页增加按SKU铺货新需求
    }
  });
  </script>